<template>
  <div class="q-pa-md login-container" style="max-width: 400px">
    <q-form @submit="onSubmit" class="q-gutter-md">
      <div style="width:100%;text-align:center;"><img alt="Quasar logo" src="~assets/quasar-logo-full.svg" /></div>
      <q-input
        filled
        v-model="username"
        label="用户名*"
        lazy-rules
        :rules="[(val) => (val && val.length > 0) || '请输入用户名']"
      />
      <q-input
        v-model="password"
        filled
        :type="isPwd ? 'password' : 'text'"
        :rules="[(val) => (val && val.length > 0) || '请输入密码']"
        label="密码*"
      >
        <template v-slot:append>
          <q-icon
            :name="isPwd ? 'visibility_off' : 'visibility'"
            class="cursor-pointer"
            @click="isPwd = !isPwd"
          />
        </template>
      </q-input>

      <div>
        <q-btn label="登 录" type="submit" class="full-width" color="primary" />
      </div>
    </q-form>
    <q-ajax-bar
      ref="bar"
      position="bottom"
      color="accent"
      size="10px"
      skip-hijack
    />
  </div>
</template>
<script>
import API from '../api/api_user'
export default {
  data () {
    return {
      username: null,
      password: '',
      isPwd: true
    }
  },

  methods: {
    onSubmit () {
      const that = this
      const loginParams = { account: this.username, password: this.password }
      API.login(loginParams).then(function (result) {
        if (result && result.code === 1) {
          localStorage.setItem('access-user', JSON.stringify(result))
          localStorage.setItem('user_token', result.data.userinfo.token)
          that.$router.push({ path: '/' })
        } else {
          that.$q.notify({
            message: result.msg,
            type: 'negative'
          })
        }
      }, function (err) {
        that.$q.notify({
          message: err.response.data.msg,
          type: 'negative'
        })
      }).catch(function (error) {
        console.log(error)
      })
    }
  }
}
</script>
<style lang="scss" scoped>
  .login-container {
    margin: 150px auto;
    border: 1px solid #eaeaea;
    padding: 50px;
  }
</style>
